<template>
  <!-- 访客记录-详情 -->
  <public-modal
    :footer="false"
    :publicVisible="publicVisible"
    cancelContext="拒绝"
    confirmContext="通过"
    modalStyle="detailModal"
    title="详情页"
    width="700px"
    @cancel="cancel"
    @handleOk="handleOk"
  >
    <div slot="content">
      <div class="grid-wrap">
        <div class="grid-item-label name-label flex align-center justify-center">姓 名</div>
        <div class="grid-item-value name-value flex align-center">{{ details.personName }}</div>

        <div class="grid-item-label sex-label flex align-center justify-center">性 别</div>
        <div class="grid-item-value sex-value flex align-center">{{ details.sex == 1 ? '男' : '女' }}</div>

        <div class="grid-item-label age-label flex align-center justify-center">年 龄</div>
        <div class="grid-item-value age-value flex align-center">{{ get_age(details.birth) }}</div>

        <div class="grid-item-label idcard-label flex align-center justify-center">身份证号</div>
        <div class="grid-item-value idcard-value flex align-center">{{ details.idCard }}</div>

        <div class="grid-item-label id-image-label flex align-center justify-center">证件照片</div>
        <div class="grid-item-value id-image-value flex align-center click-style" @click="werImg('idCardImage')">
          <img
            id="idCardImage"
            :data-original="imgPrefix + details.idCardImage"
            :src="imgPrefix + details.idCardImage"
            style="display: none"
          />
          查看
        </div>

        <div class="grid-item-label image-label flex align-center justify-center">头像图片</div>
        <div class="grid-item-value image-value flex align-center justify-center" style="padding: 0">
          <img
            id="personImage"
            :data-original="imgPrefix + details.personImage"
            :src="imgPrefix + details.personImage"
            style="width: 170px; height: 210px; border-radius: 8px; object-fit: cover; cursor: pointer"
            @click="werImg('personImage')"
          />
        </div>

        <div class="grid-item-label person-type-label flex align-center justify-center">人员类型</div>
        <div class="grid-item-value person-type-value flex align-center">
          {{ get_dict_type(temporary_person_type, details.bizType) }}
        </div>

        <div class="grid-item-label phone-label flex align-center justify-center">联系方式</div>
        <div class="grid-item-value phone-value flex align-center">{{ details.mobile }}</div>

        <div class="grid-item-label address-label flex align-center justify-center">户籍地址</div>
        <div class="grid-item-value address-value flex align-center">
          {{ details.residenceDetail }}
        </div>

        <div class="grid-item-label now-address-label flex align-center justify-center">现居地址</div>
        <div class="grid-item-value now-address-value flex align-center">{{ details.addressDetail }}</div>

        <div class="grid-item-label work-label flex align-center justify-center">工作单位</div>
        <div class="grid-item-value work-value flex align-center">
          {{ details.workUnit }}
        </div>

        <!-- status -->

        <div v-if="details.status == 2" class="grid-item-label policeName-label flex align-center justify-center">
          核实/添加民警
        </div>
        <div v-if="details.status == 2" class="grid-item-value policeName-value flex align-center">
          {{ details.markPoliceName }}
        </div>

        <div v-if="details.status == 2" class="grid-item-label createTime-label flex align-center justify-center">
          核实/添加时间
        </div>
        <div v-if="details.status == 2" class="grid-item-value createTime-value flex align-center">
          {{ details.createTime }}
        </div>
      </div>
    </div>

    <div slot="footer"></div>
  </public-modal>
</template>
<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import publicModal from '@/components/publicModal'
import { ajaxGetDictItems } from '@/api/api'
import { getPrefixImg } from '../../../utils/util'
export default {
  name: 'detailModal',
  components: { publicModal },
  data() {
    return {
      publicVisible: false,
      details: {},

      imgPrefix: '',
      temporary_person_type: [],
    }
  },
  methods: {
    show(records) {
      this.getDist()
      console.log(records, 'records')
      this.details = records
      this.publicVisible = true
    },

    async getDist() {
      let { result: static_server } = await ajaxGetDictItems({ code: 'static_server' })
      this.imgPrefix = getPrefixImg()

      let { result: temporary_person_type } = await ajaxGetDictItems({ code: 'temporary_person_type' })
      this.temporary_person_type = temporary_person_type
    },

    get_age(target) {
      const specifiedDate = new Date(target)
      const currentDate = new Date()
      const yearDifference = currentDate.getFullYear() - specifiedDate.getFullYear()
      return yearDifference
    },

    get_dict_type(list, type) {
      let res = list.find((item) => item.value == type)
      if (res && res.title) {
        return res.title
      } else {
        return '暂无'
      }
    },

    werImg(id) {
      const ViewerDom = document.getElementById(id)
      const viewer = new Viewer(ViewerDom, {
        toolbar: true,
        button: true,
        navbar: true,
        title: false,
        url: 'data-original',
        hide: function () {
          viewer.destroy()
        },
      })
      viewer.show()
    },

    handleOk() {
      this.publicVisible = false
    },
    cancel() {
      this.publicVisible = false
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .modalCotent {
  padding: 20px 40px;
  border-radius: 0 0 4px 4px;
}

/deep/ .modalFooter {
  height: 0 !important;
}

.grid-wrap {
  width: 639px;
  // height: 414px;
  display: grid;
  grid-template-columns: 120px 200px 120px 200px;
  grid-template-rows: repeat(10, 46px);
  // grid: auto-flow 46px / 120px 200px 120px 200px;
  grid-template-areas:
    'a1 a2 a3 a4'
    'a5 a6 a3 a4'
    'a7 a8 a3 a4'
    'a9 a10 a3 a4'
    'a11 a12 a3 a4'
    'a13 a14 a15 a16'
    'a17 a18 a18 a18'
    'a19 a20 a20 a20'
    'a21 a22 a22 a22'
    // 'a23 a24 a24 a24'
    'a25 a26 a27 a28';

  font-size: 14px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
}

.grid-item-label {
  background: var(--theme-modal-label-bg);
  border-bottom: 1px solid #0b4c8c;
  color: var(--theme-tab-text-color);
}

.grid-item-value {
  background: var(--theme-container-bg);
  border: 0.01rem solid var(--theme-input-border);
  color: var(--theme-modal-label-value-color);
  padding-left: 25px;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.name-label {
  grid-area: a1;
}

.name-value {
  grid-area: a2;
}

.image-label {
  grid-area: a3;
}

.image-value {
  grid-area: a4;
}

.sex-label {
  grid-area: a5;
}

.sex-value {
  grid-area: a6;
}

.age-label {
  grid-area: a7;
}

.age-value {
  grid-area: a8;
}
.idcard-label {
  grid-area: a9;
}

.idcard-value {
  grid-area: a10;
}

.id-image-label {
  grid-area: a11;
}

.id-image-value {
  grid-area: a12;
}

.click-style {
  color: #47e829;
  cursor: pointer;
}

.person-type-label {
  grid-area: a13;
}

.person-type-value {
  grid-area: a14;
}

.phone-label {
  grid-area: a15;
}

.phone-value {
  grid-area: a16;
}

.address-label {
  grid-area: a17;
}
.address-value {
  grid-area: a18;
}

.now-address-label {
  grid-area: a19;
}

.now-address-value {
  grid-area: a20;
}

.work-label {
  grid-area: a21;
}
.work-value {
  grid-area: a22;
}

.policeName-label {
  grid-area: a25;
}

.policeName-value {
  grid-area: a26;
}

.createTime-label {
  grid-area: a27;
}

.createTime-value {
  grid-area: a28;
}
</style>
